//将用户名从本地提取出来,修改index页面的用户名

console.log(uname)
document.querySelector('.ml-2 span').innerHTML = uname ? uname : ''
// 如果没有token,那么跳转到登录页面

//请求数据
/* axios({
  url: '/dashboard',
  headers: {
    Authorization: token
  }
}).then(res => {
  console.log(res)
  //● 获取首页统计数据并渲染 [获取-学生统计数据] 
  // 需要在请求接口的时候携带token
  renderTop(res.data.data.overview)
}).catch(err => {
  toast('请先登录', false)
  setTimeout(() => {
    location.href = '../login.html'
  }, 1500)
}) */

//💕将请求数据/渲染页面/登录失败的逻辑整合成函数
async function updatePage() {
  //携带token请求数据--使用async编程
  //🏃🏃 原来的try catch捕捉异常的代码,被放到了响应拦截器里面
  let data = await getData()
  console.log(data)
  //得到数据渲染页面
  renderTop(data.data.data.overview)
  //制作线形图
  renderLine(data.data.data.year)
  //制造饼状图
  renderPie(data.data.data.salaryData)
//制作每组薪资的柱状图--默认进入的是第一组--🏃🏃 这个使用事件委托来绑定事件
renderColumn(data.data.data.groupData)




}






//封装请求数据的函数
function getData() {
  return axios({
    url: '/dashboard'//💕💕 这里不需要配置请求头里面的token,因为在auth.js文件里面设置了请求拦截器
  })

}



//封装渲染顶部数据的函数
function renderTop({ age, group_count, salary, student_count }) {
  document.querySelector('.salary').innerHTML = salary
  document.querySelector('.student_count').innerHTML = student_count
  document.querySelector('.group_count').innerHTML = group_count
  document.querySelector('.age').innerHTML = age
}

//封装线形图的函数
function renderLine(arr) {

  //echarts实例化
  const lineChart = echarts.init(document.querySelector('#line'))
  console.log(arr);

  //配置参数
  const option = {
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: arr.map(ele => ele.month)
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: arr.map(ele => ele.salary),
        lineStyle: {
          width: 4,
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#b2d7f7' // 0% 处的颜色
            }, {
              offset: 1, color: 'rgba(255,255,255,0)' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          }
        }
        ,
        type: 'line',
        smooth: true,
        areaStyle: {
          // 填充颜色
          // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
          color:
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#b2d7f7' // 0% 处的颜色
            }, {
              offset: 1, color: 'rgba(255,255,255,0)' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          }
        }
      }

    ],
  }
  //setOptions
  lineChart.setOption(option)
  //尺寸自适应
  resizeChart(lineChart)

};
//封装饼状图,总计第二个图的函数--
// //💕💕💕💕🤷‍♀️🤷‍♀️🤷‍♀️ TODO--想要将图形的渲染使用同一个函数
// function renderChart(id, option) {
//   const dom=document.querySelector(`#${id}`)
//   //将DOM元素实例化成图表
//   const myChart = echarts.init(dom)

//   //设置option

//   //setOption
//   myChart.setOption(option)
//   //将尺寸自适应
//   resizeChart(myChart)
// }
//💕 封装饼状图

function renderPie(arr) {
  console.log(arr);

  const myChart = echarts.init(document.querySelector('#salary'))
  console.log(myChart);


  const option = {
    title: {
      text: '班级薪资分布',
      top: 15,
      left: 10,
      textStyle: {
        fontSize: 16,
      }
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      // top: '5%',
      left: 'center',
      bottom: '10%'
      // data:arr.map(ele=>ele.label)
    },
    series: [
      {
        name: '班级薪资',
        type: 'pie',
        radius: ['60%', '70%'],
        avoidLabelOverlap: false,
        padAngle: 5,
        itemStyle: {
          borderRadius: 15
        },
        label: {
          show: false,
          position: 'center'
        },
        // emphasis: {
        //   label: {
        //     show: true,
        //     fontSize: 40,
        //     fontWeight: 'bold'
        //   }
        // },
        labelLine: {
          show: false
        },
        data: arr.map(ele => { return { value: ele.g_count + ele.b_count, name: ele.label } })
      }
    ]
  };
  myChart.setOption(option)

}
//柱状图--事件委托
document.querySelector('#btns')


//将相关的表格的信息提取出来







//退出功能
document.querySelector('#logout').addEventListener('click', exit)

function exit() {
  //清除本地数据
  localStorage.removeItem('uname')
  localStorage.removeItem('token')
  //跳转登录页面
  location.href = './login.html'
}

//🏃🏃 让图表跟随屏幕自适应--todo💕💕 之后要将其他的图表尺寸改变放进去
function resizeChart(dom) {
  window.addEventListener('resize', function () {
    dom.resize()
  })
}





//💕💕函数调用区
updatePage()